<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>京东注册页面模拟</title>
	<style>
		body{background-color:#EDEEED;}
		section{
			width: 800px;
			margin: 0 auto;
		}
		dl{background-color: #F5F4F3;height:45px;font: 900 20px "宋体";}
		dt{line-height: 45px}
		dd .bitian{color: red}
		dd .box{width: 150px;height:25px;text-align: right;display: inline-block;margin:5px;margin-left:120px;font-weight: normal;}
		dd #xueli{height: 25px}
		#btn{margin-left: 280px}
		textarea{resize: none;}
	</style>
</head>
<body>
	<form action="#" method="post">
		<section>
			<dl>
				<dt>账户信息</dt>
				<!-- 利用box类来达到右对齐 -->
				<dd><div class="box"><span class="bitian">*</span>账户:</div><input type="text"></dd>
				<!-- 密码的type是password -->
				<dd><div class="box"><span class="bitian">*</span>密码:</div><input type="password"></dd>
				<dd><div class="box"><span class="bitian">*</span>重复密码:</div><input type="password"></dd>
				<dd><div class="box">真实姓名:</div><input type="text"></dd>
				<!-- radio的name需要一致 -->
				<dd><div class="box">性别:</div><input type="radio" name="radio">男<input type="radio" name="radio">女</dd>
				<dd><div class="box">学历:</div>
					<select name="xueli" id="xueli">
						<option value="高中">高中</option>
						<option value="大专">大专</option>
						<!-- 默认被选的是本科 -->
						<option value="本科" selected>本科</option>
						<option value="研究生">研究生</option>
					</select>
				</dd>
				<dd><div class="box">电话:</div><input type="text" name="phone"></dd>
				<dd><div class="box">生日:</div><input type="date" name="birth"></dd>
				<dd><div class="box">个人简历:</div><textarea cols="50" rows="8" name="jianli"></textarea></dd>
				<dd id="btn">
					<input type="image" src="./regist-btn.jpg">
				</dd>
			</dl>
		</section>
	</form>
</body>
</html>